/**
 * Created by yzdd on 2018/3/11.
 */
import React, {Component} from 'react';
import {
  View,
  TextInput,
  StyleSheet,
  Image
} from 'react-native';
import {width} from '../utils/publiscStyle';

const searchIcon = require("../assets/searchIcon.png");

export default class SearchBox extends Component {
  render() {
    const {searchConStyle, searchTextInputStyle, icon, ...other} = this.props;
    return (
      <View style={[styles.searchBoxContainer, searchConStyle]}>
        <View style={styles.inputView}>
          {
            icon ?
              <Image
                source={searchIcon}
                resizeMode={"contain"}
                style={styles.icon1}
              /> : null
          }
          <TextInput
            style={[styles.searchBoxTextInput, searchTextInputStyle]}
            placeholder={"搜索"}
            underlineColorAndroid={'transparent'}
            {...other}
          />
        </View>
      </View>
    )
  }
}
const styles = StyleSheet.create({
  searchBoxContainer: {
    width,
    height: 46,
    alignItems: "center",
    justifyContent: "center",
    flexDirection: "row"
  },
  searchBoxTextInput: {
    textAlign: "left",
    fontSize: 14,
    color: "#999999",
    marginLeft: 8,
    flex: 1,
    padding: 0
  },
  icon1: {
    width: 12,
    height: 13,
    marginLeft: 10,
  },
  inputView: {
    backgroundColor: "#eeeff3",
    flexDirection: "row",
    alignItems: "center",
    width: width - 16,
    height: 28,
    borderRadius: 3,
  }
});